<template>
    <div class="goods" v-if="!isNotFound">
        <van-swipe class="goods-swipe" :autoplay="3000">
            <van-swipe-item v-for="item in album" :key="item.id">
                <img :src="item.picture" height="414">
            </van-swipe-item>
        </van-swipe>
        <van-cell-group>
            <van-cell>
                <template #title>
                    <span class="goods-top">新品</span>
                        <div class="goods-price">
                            <span class="small">￥</span>{{ goods.price }}
                            <span class="spec">{{ goods.spec }}</span>
                        </div>
                    <div class="goods-title">
                        <span class="small"> {{ goods.name }}</span>
                    </div>
                 </template>
            </van-cell>
            <van-cell class="goods-express">
                <template #title>
                    <van-col span="10">运费：10</van-col>
                    <van-col span="14">剩余：{{ goods.stock }}</van-col>
                </template>
            </van-cell>
        </van-cell-group>
        <van-cell-group class="goods-cell-group">
            <van-cell>
                <template #title>
                    <span class="van-cell-text">发货 陕西宝鸡</span>
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <span class="van-cell-text">保障 坏单包赔·假一赔四·极速退款</span>
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <span class="van-cell-text">参数 品牌：枝纯 价格：100-200</span>
                </template>
            </van-cell>
        </van-cell-group>
        <div class="goods-cell-title">—— 宝贝详情 ——</div>
        <div class="goods-description" v-html="goods.description"></div>
        <!-- 底部按钮-->
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" @click="router.push('/chatpage')" />
            <van-action-bar-icon icon="cart-o"  :badge="cartCount()" text="购物车" @click="onClickCart" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addCart"/>
            <van-action-bar-button type="danger" text="立即购买" @click="buyNow" />
        </van-action-bar>
        <van-action-sheet v-model:show="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
            <div class="product">
                <div class="product-title">
                    <div class="left">
                        <img :src="picture" alt="">
                    </div>
                    <div class="right">
                        <div class="price">
                            <span>¥</span>
                            <span class="nowprice">{{ (goods.price*addCount).toFixed(1) }}</span>
                        </div>
                        <div class="count">
                            <span>库存</span>
                            <span>{{goods.price}}</span>
                        </div>
                    </div>
                </div>
                <div class="num-box">
                    <span>数量</span>
                    <CountBox v-model="addCount"></CountBox>
                </div>
                <div class="showbtn" v-if="goods.price>0">
                    <div class="btn" v-if="mode==='cart'" @click="handleGoods">加入购物车</div>
                    <div class="btn now" v-else @click="handleGoods">立刻购买</div>
                </div>
                <div class="btn-none" v-else>该商品已抢完</div>
            </div>
        </van-action-sheet>
    </div>
    <div class="goods-not-found" v-else>商品不存在</div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { getGoodsAlbum, getGoodsDetail } from '@/api';
import { useRouter } from 'vue-router'
import CountBox from '@/components/CountBox.vue'
import { showToast } from 'vant';
 
const props = defineProps({
    id: String
})
onMounted(() => {
    loadGoodsDetail()
})

const goods = reactive({})
const album = ref([])
const isNotFound = ref(false)
const router= useRouter()
const picture= ref()

//加载商品详情
const loadGoodsDetail = async () => {
    const data1 = await getGoodsDetail({ id: props.id })
    if (!data1.id) {
        isNotFound.value = true
        return
    }
    const data2 = await getGoodsAlbum({ goods_id: props.id })
    if (data2.length === 0 && data1.picture !== '') {
        data2.push({ picture: data1.picture })
    }
    Object.assign(goods, data1)
    album.value = data2
    picture.value=album.value[0].picture
}

const onClickCart = () => {
    router.push({ name: 'cart' })
}

import { addtoCart } from '@/api'

//弹窗组件
import useCart from '@/stores/cart';
const { cartCount }= useCart()

const showPannel = ref(false)
const mode = ref('cart')
const addCount=ref(1)

const addCart = () => {
    showPannel.value = true;
    mode.value ='cart'
}

const buyNow = () =>{
    showPannel.value = true;
    mode.value = 'buynow'
}

//添加购物车和立即购买
const { cart, loadCartp, cartCheckedChange } = useCart()
const handleGoods = async() =>{
    const goods_id=goods.id
    const num=addCount.value
    const data= await addtoCart({ goods_id, num})
    if(mode.value==='buynow'){
        await loadCartp()
        const data2=await cartCheckedChange(goods_id)
        setTimeout(()=>{
            router.push('/mypay')
        },500)
    }
}

</script>

<style lang="less" scoped>
.goods {
    text-align: center;
    padding-bottom: 50px;
    .goods-swipe {
        img {
            width: 100%;
            display: block;
        }
    }
    .goods-top {
    display: block;
    width: 30px;
    padding: 0 5px;
    border-radius: 10px;
    color: #fff;
    background-color: #f44;
    }
    .goods-title {
    text-align: left;
        .small {
            font-size: 14px;
        }
    }
    .goods-price {
    color: #f44;
    text-align: left;
    font-size: 20px;
        .small {
            font-size: 12px;
        }
        .spec {
            font-size: 12px;
            color: #999;
        }
    }      
    .goods-cell-title {
        padding: 20px 0;
    }
    .goods-description {
        width: 95%;
        margin: 0 auto;
        padding-bottom: 20px;
        font-size: 14px;
        :deep(img) {
            max-width: 100%;
            height: auto;
            display: block;
        }
    }
    &-express {
        color: #999;
        font-size: 12px;
        padding: 5px 15px;
        :deep(.van-col) {
            float: left;
        }
    :deep(.van-col--14){
        width: 58%;
    }
}
    .goods-cell-group {
        :deep(.van-cell__title span){
            float: left;
        }
    }
    :deep(.van-cell:after) {
        border: none;
    }
}
.goods-not-found {
    padding-top: 48px;
    text-align: center;
    font-size: 28px;
}

.product {
  .product-title {
    display: flex;
    .left {
      img {
        width: 90px;
        height: 90px;
      }
      margin: 10px;
    }
    .right {
      flex: 1;
      padding: 10px;
      .price {
        font-size: 14px;
        color: #fe560a;
        .nowprice {
          font-size: 24px;
          margin: 0 5px;
        }
      }
    }
  }

  .num-box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  }

  .btn, .btn-none {
    height: 40px;
    line-height: 40px;
    margin: 20px;
    border-radius: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 148, 2);
  }
  .btn.now {
    background-color: #fe5630;
  }
  .btn-none {
    background-color: #cccccc;
  }
}
</style>